<script setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { getQuestionsGroup } from '@/api/index'
const router = useRouter();
const loading = ref(true);
const linkList = ref([]);
const getQuestionsGroupList = async () => {
  const resData = (await getQuestionsGroup()).data;
  linkList.value = resData;
  loading.value = false;
}

onMounted(() => {
  getQuestionsGroupList();
})

const toURL = (param, id) => {
  router.push(`/${param}/list/${id}`);
 }

</script>

<template>
  <van-row>
    <van-col span="3">
      <img src="@/assets/logo.png" width="30" height="30" style="border-radius: 50%">
    </van-col>
    <van-col span="21">模拟试题</van-col>
  </van-row>

  <h2 class="head-text">欢迎进入职前模拟试题</h2>
  <p style="padding: 0 2rem; margin-top: 2rem;">请选择您想练习的题库：</p>
  <div class="list-title">
    <van-skeleton title :row="6" :loading="loading">
      <van-cell v-for="(item, index) in linkList" :key="index" :title="item.groupName">
        <!-- 自定义右侧内容 -->
        <template #value>
          <van-button size="small" plain type="primary" @click="toURL('practice',item.groupId)"
            style="margin-right: 1rem;;">练习</van-button>
          <van-button size="small" plain type="success" @click="toURL('exam', item.groupId)">模拟考试</van-button>
        </template>
      </van-cell>
      </van-skeleton>
  </div>
</template>

<style lang="scss" scoped>
.head-text {
  padding-top: 2rem;
  font-size: 1.4rem;
  text-align: center;
  font-weight: bold;
}
.list-title{
  padding: 1rem;
  a{
    display: block;
    font-size: 1.2rem;

  }
}
.van-cell{
  align-items: center;
}

.van-col{
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.van-col--21{
  font-size: 1.1rem;
  font-weight: bold;
  justify-content: flex-start;
}


.van-cell__title span {
  white-space:nowrap;
  overflow: hidden;
  text-overflow:ellipsis ;
  display: block;
  max-width: 100%;
}

</style>